<template>
  <div class="supervise clearfix">
    <!-- 列表 -->
    <sup-list :superList="superList" :noMoreData="noMoreData"></sup-list>
    <!-- 底部按钮 -->
    <footer-btn></footer-btn>
  </div>
</template>

<script>
import SupList from "./child/SupList.vue";
import FooterBtn from "./child/FooterBtn.vue";
import { getSuperviseList } from "api/supervisr";
import { throtTling } from "utils/throttling.js";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";
export default {
  name: "Supervise",
  components: {
    SupList,
    FooterBtn,
  },
  data() {
    return {
      superList: [],
      openid: null,
      page: 1,
      limit: 6,
      // 没有更多数据
      noMoreData: false,
    };
  },
  mounted() {
    if (localStorage.getItem("openid")) {
      this.openid = localStorage.getItem("openid");
    }
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
    this.getSuperviseList();
  },
  methods: {
    getSuperviseList() {
      getSuperviseList(this.openid, this.page, this.limit).then((res) => {
        if (res.code == 200) {
          this.superList.push(...res.data.data);
        } else {
          this.noMoreData = true; 
        }
      });
    },
    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          this.page += 1;
          this.getSuperviseList();
        }
      }
    }, 600),
  },
  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    this.noMoreData = false;
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.supervise {
  height: 100%;
  background: #f7f9fb;
}
</style>